<template>
  <div id="sales">
    <div class="sales-header">
      <div class="header-container">
        <img src="../assets/images/sales/bg1.png">
        <div class="header-search">
          <el-input
            v-model="carBookingStr.phone"
            class="search-input"
            placeholder="留下手机号，专业评估师免费上门为您服务">
            <el-button slot="append"
                       @click="bookingSale">
              立即预约
            </el-button>
          </el-input>
        </div>
      </div>
      <div class="introduction">
        <ul>
          <li>
            <img src="../assets/images/sales/1.png">
            <p class="intro-title">
              当天拿钱
            </p>
            <div class="intro-detail">
              <p class="intro-subtitle">
                收车当天拿车款
              </p>
              <p class="intro-subtitle">
                首付30%起
              </p>
            </div>
          </li>
          <li>
            <img src="../assets/images/sales/2.png">
            <p class="intro-title">
              保卖好价
            </p>
            <div class="intro-detail">
              <p class="intro-subtitle">
                好车不和坏车卖
              </p>
              <p class="intro-subtitle">
                好车卖好价
              </p>
            </div>
          </li>
          <li>
            <img src="../assets/images/sales/3.png">
            <p class="intro-title">
              全程托管
            </p>
            <div class="intro-detail">
              <p class="intro-subtitle">
                专业检测评估
              </p>
              <p class="intro-subtitle">
                全程托管免打扰
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="sales-body">
      <div class="process">
        <div class="process-title">
          <img
            src="../assets/images/sales/process1.png"
            alt="服务流程">
          服务流程
        </div>
        <div class="process-detail">
          <img
            src="../assets/images/sales/process2.png"
            alt="">
        </div>
      </div>
      <div class="guarantee">
        <div class="guarantee-title">
          保卖服务保障
        </div>
        <div class="guarantee-detail">
          <ul>
            <li class="guarantee-content-item">
              <img
                src="../assets/images/sales/4.png"
                alt="服务流程">
              <div class="guarantee-content-word">
                <p class="guarantee-content-main">
                  智能定价
                </p>
                <p class="guarantee-content-subtitle">
                  大数据智能定价 一车一况卖不亏
                </p>
              </div>
            </li>
            <li>
              <img
                src="../assets/images/sales/2.png"
                alt="服务流程">
              <div class="guarantee-content-word">
                <p class="guarantee-content-main">
                  必卖保障
                </p>
                <p class="guarantee-content-subtitle">
                  12工作日内未售出 麻花车将以合同价付款
                </p>
              </div>
            </li>
            <li>
              <img
                src="../assets/images/sales/6.png"
                alt="服务流程">
              <div class="guarantee-content-word">
                <p class="guarantee-content-main">
                  放心托管
                </p>
                <p class="guarantee-content-subtitle">
                  专属车场7*24专人值守
                </p>
              </div>
            </li>
            <li>
              <img
                src="../assets/images/sales/5.png"
                alt="服务流程">
              <div class="guarantee-content-word">
                <p class="guarantee-content-main">
                  平台可靠
                </p>
                <p class="guarantee-content-subtitle">
                  20亿资金背书 高盛腾讯领投
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { addCarBooking } from '@/api/carbooking';

  export default {
    name: 'sales',
    data() {
      return {
        carBookingStr: {
          phone: '',
        },
      };
    },
    methods: {
      bookingSale() {
        const { phone } = this.carBookingStr;
        if (!phone) {
          this.$message.error('手机号不能为空!');
          return;
        }
        if (!/^\d{11}$/.test(phone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        const carBookingStr = {
          phone,
        };
        addCarBooking({ carBookingStr }).then(data => {
          if (data.success) {
            this.$alert('预约成功，稍后将会有工作人员与您联系，请保持电话畅通，谢谢！', '提示', {
              type: 'success',
              center: true,
              showConfirmButton: false,
              callback: () => { },
            });
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
#sales {
  height: 15rem;
  .sales-header {
    position: relative;
    width: 100%;
    height: 4.5rem;
    background: url(../assets/images/sales/bg2.png) center no-repeat;
    background-size: cover;
    .header-container {
      position: relative;
      width: 12rem;
      margin: 0 auto;
      overflow: hidden;
      img {
        height: 4.5rem;
        margin-left: 1.2rem;
        margin-top: -0.5rem;
      }
      .header-search {
        position: absolute;
        width: 4.66rem;
        top: 1.82rem;
        left: 4.63rem;
      }
    }
    .introduction {
      position: absolute;
      top: 3.28rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 9.9rem;
      height: 2.2rem;
      background: #fff;
      box-shadow: 0 2px 14px 0 rgba(140, 83, 19, 0.18);
      li {
        float: left;
        width: 33%;
        text-align: center;
        padding: 0.31rem 0;
        img {
          display: block;
          width: 0.65rem;
          margin: 0 auto;
        }
        .intro-title {
          margin-top: 0.22rem;
          font-size: 0.2rem;
          line-height: 0.2rem;
          color: #8c5313;
        }
        .intro-detail {
          margin-top: 0.22rem;
          p {
            font-size: 0.16rem;
            line-height: 0.2rem;
            color: rgba(140, 83, 19, 0.6);
          }
        }
      }
    }
  }
  .sales-body {
    .process {
      box-sizing: border-box;
      height: 6.08rem;
      min-width: 14rem;
      background: #fff;
      padding: 2.23rem 0 0.75rem;
      .process-title {
        text-align: center;
        color: #8c5313;
        font-size: 0.34rem;
        line-height: 0.36rem;
        img {
          display: inline-block;
          width: 0.33rem;
          vertical-align: top;
          margin-top: 4px;
        }
      }
      .process-detail {
        img {
          width: 100%;
          min-width: 14rem;
          min-height: 2.5rem;
        }
      }
    }
    .guarantee {
      background: #fffaed;
      padding: 74px 0 52px;
      .guarantee-title {
        width: 14rem;
        margin: 0 auto;
        text-align: center;
        color: #8c5313;
        font-size: 0.34rem;
        line-height: 0.36rem;
      }
      .guarantee-detail {
        ul {
          width: 12rem;
          margin: 0 auto;
          margin-top: 20px;
          padding: 0 100px;
          li {
            display: inline-block;
            width: 50%;
            img {
              float: left;
              width: 90px;
              height: 90px;
              margin: 37px 20px 0 90px;
            }
            .guarantee-content-word {
              float: left;
              margin-top: 62px;
              width: 240px;
              .guarantee-content-main {
                font-size: 20px;
                line-height: 22px;
                color: #8c5313;
              }
              .guarantee-content-subtitle {
                font-size: 16px;
                color: rgba(140, 83, 19, 0.6);
                line-height: 16px;
                margin-top: 10px;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
#sales {
  .sales-header {
    .header-container {
      .header-search {
        .search-input {
          .el-input__inner {
            width: 3.36rem;
            height: 0.46rem;
            background: #fff;
            font-size: 0.15rem;
            line-height: 0.46rem;
            padding-left: 0.1rem;
            border: none;
          }
          .el-input-group__append {
            width: 1.29rem;
            background-image: linear-gradient(223deg, #ffeaab 0, #e3bd6c 100%);
            text-align: center;
            line-height: 0.46rem;
            font-size: 0.16rem;
            color: #8c5313;
            border: none;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
